<template>
    <div class="flex flex-col flex-1 h-full pagenums" v-loading="loading">
        <div class="flex flex-col flex-1 overflow-y-auto nums">
            <div class="px-1" v-for="(page, index) in pages" :key="index"
                :style="{ backgroundColor: page.id == currectPage.id ? '#666' : '#333', }" @click="setMarkPage(index)" style="border-bottom:1px solid #222;">
                <div class="flex flex-row justify-center thumb" v-if="shouPageImg">
                    <el-image :src="page.pageImg + '?x-oss-process=image/resize,w_100,m_lfit'" fit="contain" />
                </div>
                <div class="flex flex-row px-2 py-1 items-center text-white info">
                    <div><el-tag class="w-6 mr-1" type="info" size="small">{{ page.id }}</el-tag></div>
                    <div class="flex-1">
                        <span>P-<el-input v-model="page.pageNum" class="w-40 h-6 m-2" size="small" placeholder="输入页码"
                                v-show="page.edit" >
                                <template #append>
                                    <el-button @click="editPageNum(page)">保存</el-button>
                                </template>
                            </el-input>
                            </span>
                        <span v-if="!page.edit">{{ page.pageNum }}</span>
                    </div>
                    <div>
                        <el-dropdown size="small">
                                <span class="el-dropdown-link">
                                    <el-icon class="el-icon--right" color="#fff"><arrow-down/></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :icon="Edit" @click="editPageNum(page)">{{ page.edit?'保存页码':'修改页码' }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                    </div>
                    <!-- <Edit style="width: 1em; height: 1em; margin-right: 2px" @click.stop="editPageNum(page)" /> -->
                </div>
            </div>
        </div>
        <div class="flex flex-row items-center justify-between px-2 py-2 text-white" style="border-top:1px solid #000">
            <el-button type="info" size="small" @click="createPageNum()">生成页码</el-button>
            <el-switch class="ml-2" v-model="shouPageImg" inline-prompt active-text="显示图" inactive-text="关闭图" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, onMounted, watch } from "vue";
import { storeToRefs } from "pinia";
import { useBookEditorStore, type Page } from "@/stores/modules/wisdbookMarker";
import { Edit,Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { updatePageNum } from "@/api/wisdbook/marker";
let { pages, currectPage, currectPageIndex, bookId } = storeToRefs(useBookEditorStore());
const shouPageImg = ref(false);
const loading = ref(false)
// const props = defineProps({
// });
const emit = defineEmits(['onPageChanged'])

const setMarkPage = (pageIndex: number) => {
    currectPageIndex.value = pageIndex;
    emit('onPageChanged');
}
function isNumber(str: string) {
    return /^\d+$/.test(str);
}

const editPageNum = (page: Page) => {
    if (page.edit == false) {
        page.edit = true
    } else {
        page.edit = false
        updatePageNum({ bookId: bookId.value, pages: [{ id: page.id, pageNum: page.pageNum }] }).then((data: any) => {
            ElMessage({
                message: '页码修改完成',
                type: 'success',
            })
        })
    }
}

const createPageNum = () => {
    ElMessageBox.confirm('是否重新编排页码？', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(({ value }) => {
        const currectPageNum = currectPage.value.pageNum;
        console.log(currectPageNum)
        let pageNumArr = []
        if (isNumber(currectPageNum)) {
            let index = 1
            for (let i = currectPageIndex.value + 1; i < pages.value.length; i++) {
                if (isNumber(pages.value[i].pageNum)) {
                    pages.value[i].pageNum = String(Number(currectPageNum) + index)
                    index += 1;
                    pageNumArr.push({ id: pages.value[i].id, pageNum: pages.value[i].pageNum })
                }
            }
        }

        let params = {
            bookId: bookId.value,
            pages: pageNumArr
        }
        console.log("params:", params)
        loading.value = true;
        updatePageNum(params).then((data: any) => {
            loading.value = false;
            ElMessage({
                message: '页码更新完成',
                type: 'success',
            })
        })
    })
}

onMounted(() => {
})





</script>
<style scoped lang="scss">
::-webkit-scrollbar {
    width: 5px;
    /*  宽度  */
}

/* 设置滑块的样式 */
::-webkit-scrollbar-thumb {
    background-color: #666;
    /*  背景颜色  */
    border-radius: 5px;
    /*  圆角半径  */
}

/* 设置轨道的样式 */
::-webkit-scrollbar-track {
    background-color: #333;
    /*  背景颜色  */
}

/* 设置角落的样式 */
::-webkit-scrollbar-corner {
    background-color: #666;
    /*  背景颜色  */
}
</style>
